<template>
  <view class="container">
    <!-- 筛选工具栏 -->
    <view class="filter-bar">
      <uni-search-bar placeholder="搜索种鹅编号/品种" @confirm="handleSearch" />
      <view class="filter-group">
        <picker mode="selector" :range="generationOptions" @change="changeGeneration">
          <view class="filter-item">
            世代筛选：{{ generationOptions[selectedGeneration] || '全部' }}
          </view>
        </picker>
        <picker mode="selector" :range="scoreOptions" @change="changeScoreFilter">
          <view class="filter-item">
            后代评分：{{ scoreOptions[selectedScore] || '全部' }}
          </view>
        </picker>
      </view>
    </view>

    <!-- 核心选育指标 -->
    <view class="breeding-stats">
      <view class="stat-card" v-for="stat in keyStats" :key="stat.title">
        <text class="stat-title">{{ stat.title }}</text>
        <text class="stat-value">{{ stat.value }}</text>
        <text class="stat-trend" :class="stat.trendClass">
          <uni-icons :type="stat.trendIcon" size="14" />
          {{ stat.trendValue }}
        </text>
      </view>
    </view>

    <!-- 数据可视化图表 -->
<!--  <view class="chart-container">
      <uni-charts type="line" :option="eggProductionChart" height="300px" />
      <uni-charts type="bar" :option="geneticProgressChart" height="300px" />
    </view -->

    <!-- 选育数据表格 -->
    <uni-table class="data-table" border stripe>
      <uni-tr>
        <uni-th width="120" align="center">种鹅编号</uni-th>
        <uni-th width="100" align="center">品种</uni-th>
        <uni-th width="100" align="center">世代</uni-th>
        <uni-th width="120" align="center">产蛋数（枚）</uni-th>
        <uni-th width="120" align="center">受精率</uni-th>
        <uni-th width="120" align="center">后代平均体重</uni-th>
        <uni-th width="120" align="center">遗传进展值</uni-th>
        <uni-th width="150" align="center">操作</uni-th>
      </uni-tr>
      <uni-tr v-for="item in filteredData" :key="item.id">
        <uni-td align="center">{{ item.id }}</uni-td>
        <uni-td align="center">{{ item.breed }}</uni-td>
        <uni-td align="center">G{{ item.generation }}</uni-td>
        <uni-td align="center">{{ item.eggProduction }}</uni-td>
        <uni-td align="center">{{ (item.fertilityRate * 100).toFixed(1) }}%</uni-td>
        <uni-td align="center">{{ item.offspringWeight }}kg</uni-td>
        <uni-td align="center" :class="getGeneticProgressClass(item.geneticProgress)">
          {{ item.geneticProgress.toFixed(2) }}
        </uni-td>
        <uni-td align="center">
          <button class="btn detail-btn" @click="viewPedigree(item.id)">系谱</button>
          <button class="btn analyze-btn" @click="showAnalysis(item.id)">分析</button>
        </uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script setup>
import { reactive, computed } from 'vue';

// 模拟选育数据
const breedingData = reactive([
  {
    id: 'SG-2023-001',
    breed: '四川白鹅',
    generation: 5,
    eggProduction: 85,
    fertilityRate: 0.92,
    offspringWeight: 3.2,
    geneticProgress: 1.15,
    pedigree: 'A×B系',
    selectionScore: 4.8
  }
]);

// 筛选条件
const filterState = reactive({
  searchText: '',
  selectedGeneration: 0,
  selectedScore: 0
});

// 筛选选项
const generationOptions = ['全部', 'G1', 'G2', 'G3', 'G4', 'G5'];
const scoreOptions = ['全部', '4.0+', '4.5+', '5.0+'];

// 关键统计指标
const keyStats = computed(() => [
  {
    title: '平均遗传进展',
    value: calculateAverage('geneticProgress').toFixed(2),
    trendValue: '+0.15',
    trendClass: 'positive',
    trendIcon: 'arrowup'
  },
  {
    title: '产蛋合格率',
    value: (calculateAverage('fertilityRate') * 100).toFixed(1) + '%',
    trendValue: '+2.3%',
    trendClass: 'positive',
    trendIcon: 'arrowup'
  },
  {
    title: '后代达标率',
    value: '89.5%',
    trendValue: '-1.2%',
    trendClass: 'negative',
    trendIcon: 'arrowdown'
  }
]);

// 图表配置
const eggProductionChart = reactive({
  title: { text: '产蛋性能趋势' },
  xAxis: { data: ['G1', 'G2', 'G3', 'G4', 'G5'] },
  yAxis: { name: '产蛋数（枚）' },
  series: [{ data: [78, 82, 85, 83, 87] }]
});

const geneticProgressChart = reactive({
  title: { text: '遗传进展对比' },
  xAxis: { data: ['四川白鹅', '扬州鹅', '浙东白鹅'] },
  yAxis: { name: '遗传进展值' },
  series: [{ data: [1.15, 0.98, 1.05] }]
});

// 计算方法
const calculateAverage = (field) => {
  const values = filteredData.value.map(item => item[field]);
  return values.reduce((a, b) => a + b, 0) / values.length || 0;
};

// 数据过滤
const filteredData = computed(() => {
  return breedingData.filter(item => {
    const matchesSearch = item.id.includes(filterState.searchText) || 
                        item.breed.includes(filterState.searchText);
    const matchesGeneration = filterState.selectedGeneration === 0 ||
                            item.generation === filterState.selectedGeneration;
    const matchesScore = filterState.selectedScore === 0 ||
                       item.selectionScore >= [0, 4.0, 4.5, 5.0][filterState.selectedScore];
    return matchesSearch && matchesGeneration && matchesScore;
  });
});

// 交互方法
const handleSearch = (e) => {
  filterState.searchText = e.value;
};

const getGeneticProgressClass = (value) => {
  return value >= 1.0 ? 'positive' : value >= 0.9 ? 'neutral' : 'negative';
};

const viewPedigree = (id) => {
  uni.navigateTo({ url: `/pages/breeding/pedigree?id=${id}` });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f8f9fa;
}

.filter-bar {
  background: white;
  padding: 15rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  
  .filter-group {
    display: flex;
    gap: 20rpx;
    margin-top: 15rpx;
    
    .filter-item {
      padding: 10rpx 20rpx;
      background: #e9ecef;
      border-radius: 8rpx;
      font-size: 28rpx;
    }
  }
}

.breeding-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240rpx, 1fr));
  gap: 15rpx;
  margin-bottom: 20rpx;
  
  .stat-card {
    background: white;
    padding: 20rpx;
    border-radius: 8rpx;
    box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
    
    .stat-title {
      display: block;
      color: #666;
      font-size: 26rpx;
    }
    
    .stat-value {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      margin: 10rpx 0;
    }
    
    .stat-trend {
      font-size: 24rpx;
      
      &.positive { color: #4cd964; }
      &.negative { color: #dd524d; }
    }
  }
}

.chart-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.data-table {
  background: white;
  border-radius: 12rpx;
  overflow: hidden;
  
  ::v-deep .uni-table-th {
    background-color: #f1f3f5;
    font-weight: 600;
  }
  
  .positive { color: #4cd964; font-weight: bold; }
  .neutral { color: #ff9500; }
  .negative { color: #dd524d; }
}

.btn {
  padding: 8rpx 16rpx;
  font-size: 24rpx;
  border-radius: 6rpx;
  
  &.detail-btn {
    background-color: #4cd96422;
    color: #4cd964;
  }
  
  &.analyze-btn {
    background-color: #007aff22;
    color: #007aff;
  }
}
</style>